<template>
  <div>
    <!-- <van-nav-bar title="个人" :class="[Styleobj]" style="font-size:20px;color: white;"></van-nav-bar> -->
    <img class="back" src="../assets/img/logo.jpg" />
    <br />
    <div class="changeInformation">
      <van-cell-group>
        <van-cell>
          <van-field
            label="用户名"
            v-model="username"
            @click="tochange"
          ></van-field>
          <van-field label="电话" v-model="phone"></van-field>
          <van-field label="地址" v-model="address"></van-field>
          <van-button @click="changeinfo" style="width: 100%"
            >确认修改</van-button
          >
        </van-cell>
      </van-cell-group>
    </div>
    <hr />
  </div>
</template>

<script>
import { Toast } from "vant";
import storage from "../mydata/storage.js";
export default {
  data() {
    return {
      username: "",
      phone: "",
      address: "",
      //         Styleobj:{
      //     backgroundcolor: 'backgroundcolor'
      //   }
    };
  },
  beforeMount() {
    var data = storage.get("userinfo");
    this.username = data.username;
    this.phone = data.phone;
    this.address = data.address;
  },
  props: {
    Styleobj: {
      type: String,
      default: "",
    },
  },
  methods: {
    changeinfo: function () {
      if (this.username == "") Toast.fail("用户名不能为空");
      // 用本地存储保存注册的用户名和密码
      else {
        var data = {
          username: this.username,
          phone: this.phone,
          address: this.address,
        };
        storage.set("userinfo", data);
        Toast.success("修改成功！");
        this.$router.push("/setting");
      }
    },
  },
};
</script>
<style scoped>
.van-button--default {
  background-color: rgb(98, 96, 96);
  color: aliceblue;
}
.back {
  width: 100px;
  height: 100px;
  padding-top: 20px;
}
.changeInformation {
  width: 95%;
  margin: auto;
}
</style>
